<template>
  <div>
    <List :list="list" :viewCount="15" :rowHeight="30"></List>
  </div>
</template>

<script>
import List from "./list.vue";
export default {
  data () {
    const bigList = new Array(20000).fill(null).map((item, i)=>({ n: i+ 1}))
    return {
      list: Object.freeze(bigList),
    }
  },
  components: {
    List
  },
  computed:{
  },
  mounted() {
  },
  methods: {
    onScroll() {
      let offsetTop = this.$refs.viewPort.scrollTop;
      this.start = Math.round(offsetTop / this.rowHeight);
      this.end = this.start + this.viewCount;

      this.$refs.list.style.transform = `translateY(${offsetTop}px)`

      console.log(offsetTop,this.$refs.viewPort.scrollTop);
    },
  },
}

</script>
<style scoped lang='less'>
</style>